<template>
  <div>
    <input placeholder="输入关键字搜索" v-model="uname">
    <table class="my-table">
      <thead>
        <tr>
          <th>就诊日期</th>
          <th>医生姓名</th>
          <th>诊断结果</th>
          <th>处方信息</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <MyFrom 
        v-for="(item) in list " 
        :key="item.uname"
        :date="item.date"
        :uname="item.uname"
        :result="item.result"
        :information="item.information"
        :item="item"
        ></MyFrom>
        <!-- <NotiFication class="box"></NotiFication> -->
      </tbody>
    </table>
  </div>
</template>

<script>
import MyFrom from './components/MyFrom.vue'
// import NotiFication from './components/NotiFication.vue'

export default{
  components:{
    MyFrom,
  },
  data(){
    return {
      uname:'',
      flag:true,
      listArr:[],
      list: [
        {
          date:'2020-12-12',
          uname:'李四',
          result:'健康',
          information:'感冒药',
        },
        {
          date:'2020-1-12',
          uname:'张三',
          result:'健康',
          information:'感冒药',
        },
        {
          date:'2020-7-12',
          uname:'王五',
          result:'不健康',
          information:'发烧药',
        },
      ],
    }
  },
  watch:{
    uname(){
      const flag = this.uname
      console.log(flag);
      
       if(flag){
        if(this.flag) this.listArr = this.list
        this.flag = false
        const arr = this.list.filter(item=>item.uname === this.uname)
        this.list =  arr.length ? arr : this.list
       }else{
        this.list = this.listArr
       }
    },
  },

}
</script>


<style >
.box{
  display: none;
}
  .my-table {
    border-collapse: collapse;
    width: 100%;
  }

  .my-table td, .my-table th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }

  .my-table th {
    background-color: #f2f2f2;
  }
</style>
